<script setup lang="ts">
import {
  EventName,
  WritingMode,
} from '../../../enums'
import useConfigStore from '../../../store/config'
import useMicroStore from '../../../store/micro'
import { isMicro } from '../../../utils'

const route = useRoute()

const configStore = useConfigStore()
const microStore = useMicroStore()

function toggleMode(mode: WritingMode) {
  const html = document.querySelector('html')!
  html.setAttribute('dir', mode)
  configStore.setWritingMode(mode)

  if (isMicro(route.path)) {
    microStore.getBus.emit(EventName.SWITCH_WRITING_MODE, mode)
  }
}

</script>

<template>
  <ElRadioGroup
    :model-value="configStore.getWritingMode"
    @change="toggleMode"
  >
    <ElRadio :value="WritingMode.LTR">
      从左到右(ltr)
    </ElRadio>
    <ElRadio :value="WritingMode.RTL">
      从右到左(rtl)
    </ElRadio>
  </ElRadioGroup>
</template>
